<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #head{
            width: 100%;
            height: 100px;
            background: red;
        }
        #nav{
            width: 100%;
            height: 50px;
            background: black;
        }
        #main{
            width: 1000px;
            height: 2000px;
            margin: auto;
            background: gray;
        }
        .navFixed{
            position: fixed;
            left: 0;
            top:0;
        }
    </style>
</head>
<body>
<header id="head"></header>
<nav id="nav"></nav>
<main id="main"></main>
</body>
<script>
    var head=document.getElementById("head");
    var nav=document.getElementById("nav");
    var headHeight=head.offsetHeight;
    window.onscroll=function(){
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        console.log(scrollTop);
        if(scrollTop>=headHeight){
            nav.className="navFixed";
        }else{
            nav.className="";
        }
    }
</script>
</html>